準備技術:

1. Vaadin
2. Vaadin Login form component

Vaadin 處理瀏覽器網頁頁面切換，是用Navigator物件。今天實做一個Login表單來看頁面切換，同時也學習Login程式技巧。

1. 開一個Vaadin7專案，檔案狀況如圖。

2. 從圖中可知道，我們要開MVP模式的程式，什麼是MVP?我們可能熟知MVC，簡單來說就是把View的監聽改成C就是P。

3. 做一個資料程式User

   public class User {
   private String username;
   private String password;

    public User(){
   
    }
   
    public User(String username, String password){
    	this.password=password;
    	this.username=username;
    }
    public String getUsername() {
    	return username;
    }
    public void setUsername(String username) {
    	this.username = username;
    }
    public String getPassword() {
    	return password;
    }
    public void setPassword(String password) {
    	this.password = password;
    }
   

   }

4. 做一個Service連接資料

   public class UserServiceDummy implements UserService{

    @Override
    public User login(String username, String password) throws ServiceException {
    	// TODO Auto-generated method stub
    	return new User(username, password);
    }
   

   }

5. 做一個View。

   public interface LoginView extends View{
   void setHandler(LoginViewHandler handler);
   void init();
   TextField getTxtUsername();
   TextField getTxtPassword();
   Button getBtnLogin();
   void afterSuccessfulLogin();

   }

6. 做一個P，注意程式內的連接。

   public class LoginPresenter implements LoginViewHandler {

    private LoginView view;
    private UserService service;
   
    public LoginPresenter(LoginView view, UserService service) {
    	this.view = view;
    	this.service = service;
    }
   
    @Override
    public void login() {
    	TextField txtUsername = view.getTxtUsername();
    	TextField txtPassword = view.getTxtPassword();
    	String username = txtUsername.getValue();
    	String password = txtPassword.getValue();
   
    	try {
    			service.login(username, password);
    			view.afterSuccessfulLogin();
   
    			} catch (com.vaadin.server.ServiceException e) {
    				// TODO Auto-generated catch block
    				e.printStackTrace();
    			}
    }
   

   }

7. 最後做UI。放入Navigator，如果登入，切換頁面。

   protected void init(VaadinRequest request) {
   Navigator navigator = new Navigator(this, this);

    	LoginView loginView = new LoginViewImpl();
    	LoginPresenter loginPresenter = new
    	LoginPresenter(loginView, new UserServiceDummy());
    	loginView.setHandler(loginPresenter);
    	loginView.init();
    	navigator.addView("", loginView);
    	setNavigator(navigator);
    	navigator.navigateTo("");
    }
   

參考資料

1. Vaadin 官網
2. Vaadin書籍
3. MVP pattern

Day15 結束